<template>
  <div class="container">
    <div class="input-group">
      <input type="text" class="input-field" v-model="SearchValue" placeholder="请输入内容..." />
      <button class="submit-btn" @click="submit">搜索</button>
    </div>

    <div class="Recording">
      <div style="width: 600px">
        <span class="Warning item-with-separator" v-for="item in Recording" :key="item" @click="handleClick(item)">{{ item }} </span>
      </div>
      <div style="width: 100px">
        <el-icon v-if="Recording.length != 0" :class="{ 'hand-cursor': isHovered }" @click="DeleteRD" @mouseover="isHovered = true" @mouseout="isHovered = false">
          <Delete />
        </el-icon>
      </div>
    </div>

    <div class="top">
      <div class="carousel">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in recommend" :key="item">
            <NuxtLink class="omit" :to="'/content/' + item.link">
              <img :src="item.imageUrl" style="width: 100%; height: 100%" alt="" />
            </NuxtLink>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="top-content-list-wrapper">
        <div class="top-content-list" v-for="item in TopContent" :key="item" @click="onLinkClick(item.link)">
          <img :src="item.imageUrl" alt="" />
          <NuxtLink :to="'/content/' + item.link">{{ item.description }}</NuxtLink>
        </div>
      </div>
    </div>

    <div class="features" v-for="item in interestedTitle" :key="item">
      <div class="features-title">
        <h2>{{ item.title }}</h2>
        <div>
          <el-button @click="onMoreClick(item)">
            更多<el-icon class="el-icon--right"><Right /></el-icon>
          </el-button>
        </div>
      </div>
      <div class="content-1">
        <div class="content-1-list" v-for="content in item.content" :key="content" @mouseover="onMouseEnter(content.id)" @mouseout="onMouseLeave(content.id)" @click="onLinkClick(content.id)">
          <div class="video-preview">
            <video :src="content.video" style="width: 100%; height: 100%; object-fit: fill" muted loop preload="metadata" playsinline></video>
            <img :src="content.imageUrl" alt="" />
          </div>
          <NuxtLink :to="'/content/' + content.id">{{ content.description }}</NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Right, Delete } from "@element-plus/icons-vue";

const recommend = ref<any>([
  {
    imageUrl: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    link: 1,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    link: 2,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    link: 3,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    link: 4,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    link: 5,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    link: 6,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
    link: 7,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
]);

const TopContent = ref<any>([
  {
    imageUrl: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    link: 1,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    link: 2,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    link: 3,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    link: 4,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    link: 5,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
  {
    imageUrl: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    link: 6,
    description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
  },
]);

let contentObj = {
  imageUrl: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  video: "https://vjs.zencdn.net/v/oceans.mp4",
  id: 0,
  description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
};

let lastId = 0;

// interestedTitle 感兴趣标题
const interestedTitle = ref<any>([
  {
    title: "精选文章1",
    id: 1,
    content: [],
  },
  {
    title: "技术分享2",
    id: 2,
    content: [],
  },
  {
    title: "设计趋势3",
    id: 3,
    content: [],
  },
  {
    title: "编程教程4",
    id: 4,
    content: [],
  },
  {
    title: "产品评测5",
    id: 5,
    content: [],
  },
  {
    title: "行业新闻6",
    id: 6,
    content: [],
  },
  {
    title: "创新案例7",
    id: 7,
    content: [],
  },
]);

function cloneObject(obj: { imageUrl: string; video: string; id?: number; description: string }) {
  const newObj = JSON.parse(JSON.stringify(obj));
  newObj.id = ++lastId;
  return newObj;
}

interestedTitle.value = interestedTitle.value.map((titleItem: { content: any[] }) => {
  const contentArray = Array.from({ length: 10 }, () => cloneObject(contentObj));
  titleItem.content = contentArray;
  return titleItem;
});

const videoPlayers: any = {};

// 鼠标悬停时播放视频
const onMouseEnter = (id: any) => {
  if (videoPlayers[id]) {
    videoPlayers[id].play();
    videoPlayers[id].style.opacity = 1;
  }
};

// 鼠标离开时暂停视频
const onMouseLeave = (id: string | number) => {
  if (videoPlayers[id]) {
    videoPlayers[id].pause();
    videoPlayers[id].currentTime = 0;
    videoPlayers[id].style.opacity = 0;
  }
};

const router = useRouter();

const onLinkClick = (id: any) => {
  router.push({ path: `/content/${id}` });
};

const onMoreClick = (item: any) => {
  console.log(item.title);
  router.push({ path: `/grouping/${item.title}` });
};

onMounted(() => {
  interestedTitle.value.forEach((item: any) => {
    item.content.forEach((element: any) => {
      videoPlayers[element.id] = document.querySelector(`video[src="${element.video}"]`);
    });
  });
});

const SearchValue = ref("");

const submit = () => {
  console.log(SearchValue.value);
  router.push({ path: `/search/${SearchValue.value}` });
};

const Recording = ref(Array.from({ length: 99 }, (_, i) => (i + 1).toString()));

const handleClick = (e: any) => {
  console.log(e);
  router.push({ path: `/search/${e}` });
};

const DeleteRD = () => {
  console.log("删除");
  Recording.value = [];
};

const isHovered = ref(false);
</script>

<script></script>

<style scoped>
.container {
  width: 1600px;
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}

.omit {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.carousel {
  width: 640px;
  height: 440px;
  background-color: #475669;
  margin: 20px 20px 20px 0px;
}

.top {
  display: flex;
}

.top-content-list-wrapper {
  margin: 20px 0;
  height: 500px;
  /* background-color: #475669; */
  width: 940px;

  display: flex;
  flex-wrap: wrap;
}

.content-1 {
  margin: 20px 0;
  height: 500px;
  /* background-color: #475669; */
  width: 1600px;

  display: flex;
  flex-wrap: wrap;
}

.top-content-list {
  height: 200px;
  flex: 0 0 calc(33.33% - 10px); /* 三等分减去间距 */
  margin: 5px; /* 控制间距 */
}

.content-1-list {
  height: 200px;
  flex: 0 0 calc(20% - 10px); /* 五等分减去间距 */
  margin: 5px; /* 控制间距 */
}

.features-title {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

a {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  width: 300px;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img:hover {
  cursor: pointer;
}

a:hover {
  cursor: pointer;
  color: #409eff;
}

.features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.el-carousel__item h2 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.video-preview {
  cursor: pointer; /* 添加这行代码 */
  position: relative;
  width: 310px;
  height: 200px;
}
.video-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始不显示 */
  transition: opacity 0.3s ease-in-out; /* 平滑过渡 */
}

.input-group {
  position: relative;
  width: 700px;
  margin: 20px auto;
}

.input-field {
  width: 600px;
  padding: 15px 20px;
  border-radius: 25px;
  border: 1px solid #ddd;
  outline: none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* 按钮样式 */
.submit-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  padding: 0 20px;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 0 25px 25px 0;
  font-size: 14px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #0056b3;
}

/* 输入框聚焦时按钮效果 */
.input-field:focus + .submit-btn {
  background-color: #0056b3;
}

.Recording {
  width: 700px;
  text-align: left;
  margin: auto;
  display: flex;
}

.Warning {
  color: #e6a23c;
}

.Warning:hover {
  cursor: pointer;
  color: #007bff;
}

.item-with-separator:not(:last-child)::after {
  content: " ";
  margin: 0 5px; /* 可根据需要调整分隔符与文本的间距 */
}

.hand-cursor {
  cursor: pointer;
}
</style>
